// 类似vue中的app.vue 是最大的组件 其他组件的父组件
// import logo from './logo.svg';
import './App.css';
// jsx语法中有js和html 所以需要区分 将js代码写在{}中 将html代码写在<>中

// 1.引入组件
import ComAFn from './components/ComAFn';
import ComBClass from './components/ComBClass';
import ComBig from './components/ComBig';
import ComFather from './components/ComFather';

function App() {
  let num1 = 18;
  let name1 = 'Tom';
  let hasWude = true;
  let arr1 = [1, 2, 3, 4];
  let obj1 = {
    age: 69,
    name: 'mbg'
  }
  let classNameP = 'p2 p3'
  return (
    <div className="App">
      <header className="App-header">
        {/* 2.使用组件 */}
        <ComAFn></ComAFn>
        <ComBClass></ComBClass>
        <ComBig></ComBig>
        <ComFather></ComFather>
        {/* <img src={logo} className="App-logo" alt="logo" /> */}
        <p className={'p1'}>{num1}</p>
        <p className={classNameP}>{name1}</p>
        <p>{hasWude ? '' : '不'}讲武德</p>
        <p>{arr1.length}</p>
        <p>{obj1.age}</p>
      </header>
      {/* 循环 */}
      {
        arr1.map((item, index) => {
          return (
            // return后面加上小括号 包裹要返回的结构 避免自动插入分号 导致bug
            // key的做用和vue中的key一致
            <button key={index}>{item}</button>
          )
        })
      }
      {/* 判断 */}
      {
        (function () {
          if (hasWude) {
            return (
              <mark>讲武德的马保国</mark>
            )
          } else {
            return (
              <div>年轻人不讲武德</div>
            )
          }
        })()
      }
    </div>
  );
}

export default App;
